<template>
  <div class="login">
    <div class="login_box">
      <div class="title">
        <h3>后台登陆</h3>
      </div>
      <el-form :rules="rules" ref="basicForm" :model="form">
        <el-form-item prop="account">
          <el-input
            v-model="form.account"
            prefix-icon="el-icon-user"
            placeholder="用户名称"
          ></el-input>
        </el-form-item>

        <el-form-item prop="code">
          <el-input
            v-model="form.code"
            :type="pwdType"
            prefix-icon="el-icon-lock"
            placeholder="密码"
          >
            <i
              slot="suffix"
              class="el-icon-view"
              v-show="visible"
              @click="toggleEye"
            ></i>
            <i
              slot="suffix"
              class="iconfont icon-close-eye"
              v-show="!visible"
              @click="toggleEye"
            ></i>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit('basicForm')"
            >登陆</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import {Button, Form, FormItem, Input, Message} from 'element-ui';
Vue.prototype.$message = Message;
export default {
  components:{
    [Button.name]: Button,
    [Form.name]: Form,
    [FormItem.name]: FormItem,
    [Input.name]: Input,
  },
  data() {
    return {
      form: {
        account: "",
        code: "",
      },
      visible:false,
      pwdType: "password",
      rules: {
        account: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        code: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created(){

  },
  methods:{
      
      onSubmit(formName) {
        // valid 验证表单返回结果 布尔值
        this.$refs[formName].validate((valid)=>{
            if(!valid){
                this.$message({type:'error',message:'表单内容有误，请检查表单内容'})
            }else{
                // 发送接口请求-----
                if(this.form.account==='admin' && this.form.code==='admin'){
                    this.$message({
                      type:'success',
                      message:'登陆成功'
                  });
                  this.$router.push('/home');
                }else{
                  this.$message({
                    type:'error',
                    message:'用户名或密码错误'
                  });
                }
            }
        })
    },
    toggleEye(){
      this.pwdType = this.pwdType === 'password'?'text':'password';
      this.visible = !this.visible;
    },
  }
};
</script>

<style lang='scss' scoped>
@import url('//at.alicdn.com/t/font_2526218_ceyijfiwic.css');
.login {
font-family: PingFangSC-Medium, PingFang SC;
  width: 100vw;
  height: 100vh;
  background: url("../assets/bg_sky.jpg") no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .login_box{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      height: 100%;
      .title{
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 3.8vh;
          img{
              width:23.5vw;
              height: 4.35vh;
              margin-bottom:1.9vh;
          }
          h3{
            font-weight: 500;
            color: #37AC7D;
            line-height: 29px;
            font-size: 2.6vh;
          }
      }
      .el-form{
         /deep/ input{
              width:18.75vw;
              height: 5.37vh;
              padding-left:2.4vw ;
          }
          /deep/ button{
              width:18.75vw;
              height: 5.56vh;
              background: #37AC7D;
              font-size: 1.9vh;
              color:white;
              font-weight: 400;
              border-radius: 8px;
              border:none;
          }
          /deep/ .el-input__icon{
              font-size: 1.8vh;
              margin-left: 0.6vw;
              display: flex;
              align-items: center;

          }
          /deep/ .el-input__inner{
              font-size: 1.47vh !important;
          }
          /deep/ .el-input__suffix{
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 1.8vh;
              margin-right:0.5vw ;
          }
      }
  }
  p{
      width: 100%;
      position: fixed;
      bottom:0.8vw;
      text-align: center;
      font-weight: 400;
        color: #37AC7D;
        line-height: 2vh;
        font-size: 1.6vh;
  }
}
</style>